<template>
  <div>
    <t-space direction="vertical" size="large" class="tdesign-demo-form-status">
        <t-form
          ref="form1"
          label-align="right"
          layout="vertical"
          :data="formData"
          :rules="rules"
          :label-width="100"


          @submit="onSubmit"
        >
         <t-form-item label="Name" name="name">
           <t-input v-model="formData.name" placeholder=""></t-input>
         </t-form-item>
         <t-form-item label="slug" name="slug">
           <t-input v-model="formData.slug" placeholder=""></t-input>
         </t-form-item>

          <t-form-item label="description" name="description">
            <t-input v-model="formData.description" placeholder=""></t-input>
          </t-form-item>
 <t-form-item label="featureImage" name="featureImage">
   <t-space direction="vertical" style="width:520px">
     <t-input v-model="formData.feature_image" placeholder="" style="display:none"></t-input>
           <ImgUpload @success="uploadSuccess"></ImgUpload>
           <t-image :src="formData.feature_image"></t-image>

           </t-space>

          </t-form-item>
          <t-form-item label="可见度">
            <t-select v-model="tagVisiblity" placeholder="please select access"  class="post-item">
              <t-option label="Public" value="public" />
              <t-option label="Members only" value="members-only" />
              <t-option label="Specific tier(s)" value="tier" />
            </t-select>
          </t-form-item>

          <t-form-item :status-icon="false">
            <t-space size="small">
              <t-button theme="primary" type="submit">保存</t-button>
            </t-space>
          </t-form-item>
          <t-form-item>
            <t-button :disabled="formData.id==''" theme="danger" block @click="confirmDialogVisible=true">删除Tags</t-button>
          </t-form-item>
        </t-form>

      </t-space>

      <t-dialog theme="warning" header="删除确认" v-model:visible="confirmDialogVisible" @confirm="confirmDelete">
            <p>你确定要删除吗？</p>
          </t-dialog>
  </div>
</template>

<script lang="tsx" setup>
import { ref, onMounted,watch } from 'vue';
import {useRoute} from 'vue-router'
import { MessagePlugin, FormProps, FormInstanceFunctions, ButtonProps, FormItemProps } from 'tdesign-vue-next';
import {saveTags,deleteTags,getTags} from '@/api/tags'
import ImgUpload from './components/imgUpload.vue'

const route=useRoute()
const INITIAL_DATA = {
    id: '',
    accent_color: '',
    canonical_url: '',
    codeinjection_foot: '',
    codeinjection_head: '',
    created_at: '',
    created_by: '',
    description: '',
    feature_image: '',
    meta_description: '',
    meta_title: '',
    name: '',
    og_description: '',
    og_image: '',
    og_title: '',
    parent_id: '',
    slug: '',
    twitter_description: '',
    twitter_image: '',
    twitter_title: '',
    updated_at: '',
    updated_bsy: '',
    visibility: '',
};
const rules: FormProps['rules'] = {
  // fail: [
  //   {
  //     required: true,
  //     message: '必填',
  //     type: 'error', //warning
  //   },
  // ],

};
const formData = ref({
  ...INITIAL_DATA,
});
const confirmDialogVisible=ref(false)
const tagVisiblity=ref('public')
const uploadSuccess=(url)=>{
  formData.value.feature_image=url
}

const fetchData=()=>{
  let id=route.params.id
  console.log('id',id)
  if(id)
  {
    getTags(id)
    .then(ret=>{
      formData.value=ret
    })
  }else
  {
    formData.value={...INITIAL_DATA}
  }
}

const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    formData.value.visibility=tagVisiblity.value
    saveTags(formData.value)
    .then(ret=>{
      formData.value.id=ret.id
      MessagePlugin.success('提交成功');
    })
    .catch(e=>{
      if(e.message)
      {
        MessagePlugin.error(e.message);
      }
      else
      {
        MessagePlugin.error(e.msg);
      }
    })

  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

const confirmDelete=()=>{
  confirmDialogVisible.value=false
  deleteTags(formData.value.id)
  .then(ret=>{
    MessagePlugin.success('提交成功');
    router.push('/tags/index')
  })
  .catch(e=>{
    if(e.message)
    {
      MessagePlugin.error(e.message);
    }
    else
    {
      MessagePlugin.error(e.msg);
    }
  })
}
fetchData()
watch(()=>route.params.id,
()=>{
  fetchData()
})
</script>
<style>
.tdesign-demo-form-status .t-input {
  width: 520px;
}
</style>
